body,ul, li{
    margin: 0; 
    padding: 0;
}
ul{
    list-style-type: none;
}
body{
    height: 2500px ;
    color:#333;
    font:14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
a{
    text-decoration: none;
    color:#333;
}
.topbar{
    /* border:1px solid black; */
    background-color: #333;
    height:40px;   
}
.container{
    /* border:1px solid black; */
    margin: 0 auto;  /*居中，上下是0，左右自动*/
    width:1226px;
}
.container::before ,.container::after,
.clearfix::before,.clearfix::after{
    content:"";
    display: table;
}
.container::after,.clearfix::after{
    clear: both;
}
.topbar a{
    color:#b0b0b0;
    font-size: 12px;
}
.topbar a:hover{
    color:white;
}

.topbar-nav{
    float:left;
    height: 40px;
    line-height: 40px;
    font-size: 0;}
.topbar-nav span{
    font-size: 12px;
    color:#424242;
    font-family: sans-serif;
    margin: 0.5em;
}
    
.topbar-cart, .topbar-info {
    float:right;
}
.topbar-cart a{
    display: block;
    height:40px;
    line-height: 40px;
    text-align: center;
    width:120px;
    background-color: #424242;

}
.topbar-cart a:hover{
    background-color:white; 
    color: #ff6700;

}
.topbar-cart span{
    margin-left: -4px;
    font-size:12px;
}
.topbar-cart i{
    font-size: 20px;
    line-height: 20px;
    margin-right: 4px;
    vertical-align: -4px;
}

.topbar-info{
    margin-right: 15px;
}
.topbar-info a{
    float:left;
    padding: 0 5px;    /* 上下不空，左右5像素 */
    line-height: 40px;
    height: 40px;
}
.topbar-info span{
    float:left;
    font-family: sans-serif;
    font-size: 12px;
    color:#424242;
    line-height: 40px;
    height:40px;
}
.topbar-info .sep{
    padding:0 10px;
}
  
/* heada */

.header{
    height: 100px;
}
.header-log{
    float:left;
    width:62px;
    height: 55px;
    margin-top: 22px;
    /* border:1px solid black; */
}
.header-log a{
    display:block;
    height:55px;
    width: 55px;
    background: #ff6700 url(../img/mi-logo.png) no-repeat 50% 50%;
}
.header-log a.lr{
    text-align: left;
    text-indent: -9999em;
}

.header-nav{
    float:left;
    width:820px;
    height:100px;
    /* border:1px solid blue;  */
}
.header-nav .nav-list{
    width:820px;
    height:88px;
    font-size: 16px;
    padding: 12px 0 0 30px;
    
}

.header-nav .nav-list .nav-category{
    float: left;
    width:127px;
    padding:0 15px 0 0;

}
.header-nav .nav-list .nav-category span{

   display: block;
    padding: 26px 0px 38px;
    text-align: right;
    color:#333;
}

.header-nav .nav-list .nav-item{
    float: left;
    
}
.header-nav .nav-list .nav-item a{
    display: block;
    padding: 26px 10px 38px;
    color:#333;
}
.header-nav .nav-list .nav-item a:hover{
    color:#ff6700;
}


.header-search{
    float:right;
    width:296px;
    height:50px;
    margin-top: 25px;
    /* border:1px solid black; */
}
.header-search .search-form{
    position: relative;
    display: block;
    width:296px;
    height:50px;
}
.header-search .search-form .search-text{
    position: absolute;
    top: 0;
    right: 51px;
    
    display: block;
    width:245px;
    height:50px;
    line-height: 50px;
    border:1px solid #e0e0e0;
    outline: 0;
}
.header-search .search-form .search-btn{
    position: absolute;
    top: 0;
    right: 0;
  display:block;
    width:52px;
    height:50px;
    border:1px solid #e0e0e0;
    font-size:19px;
    line-height: 24px;
    background: #fff;
    color:#616161;
    outline: 0;
}
.header-search .search-form .search-btn:hover{
    background-color: #ff6700;
    color:white;
}
.header-search .search-form .search-hot-words
{
    display: block;
    position: absolute;
    top:14px;
    right:62px;
    text-align: center;
}
.header-search .search-form .search-hot-words a{
    display: inline-block;
    margin-left:1px;
    padding: 0 5px;
    font-size: 12px;
    background: #eee;
    color: #757575;
}

.main .main-slider{
    position: relative;
    width:1226px;
    height:460px;
   
}
.main .main-slider .main-bigpic{
width:1226px;


overflow: hidden;
/* background-color: yellowgreen; */



}
.main .main-slider .main-bigpic img{
width:1226px;
position: absolute;
top:0;
left:0;
z-index: 0;
}
.main .main-slider button{
    width:45px;
    height:80px;
    opacity: 0.1;
    outline: none;
    border: none;
   
}
.main .main-slider button:hover{
    opacity: 1;
    
}
.main .main-slider .main-pre{
position: absolute;
top:50%;
left:231px;
transform: translateY(-50%);
z-index: 3;
background: url('../img/icon-slides.png');
background-position-x: -2%;
}
.main .main-slider .main-next{
position: absolute;
right:0;
top:50%;
transform: translateY(-50%);
z-index: 3;
background: url('../img/icon-slides.png');
background-position-x: 35%;
}
.main .main-slider .main-icons
{position: absolute;
right: 40px;
bottom: -20px;

height:60px;

}
.main .main-slider .main-icons span{
display: inline-block;
width:6px;
height:6px;
border-radius: 50%;
margin: 0 5px;
border: 2px solid #fff;
border-color: rgba(255,255,255,0.3);
background: rgba(0,0,0,0.4);
}
.main .main-slider .main-icons span:hover{
cursor: pointer;
}
.main .main-slider .main-icons .main-active{
    background: rgba(255,255,255,0.6);
    border: 2px solid;
    border-color:  rgba(0,0,0,0.4);
 
}
.main  .main-category
{ position: absolute;
    left:0;
  z-index: 4;
  background: rgba(0,0,0,0.6);
}
.main  .main-category ul{
    width:234px;
    height:460px;
    padding: 20px 0;
    box-sizing: border-box;
   
}
.main  .main-category ul li{
   color:white;
 
}
.main  .main-category ul li>a{
    padding-left: 30px;
    height:42px;
    display: block;
    line-height: 42px;
    color: white;
    font-size: 14px;
    
}
.main  .main-category ul li:hover{
    background-color: #ff6700;
    color:white;
}
.main  .main-category ul li i{
    
    position: absolute;
    right:20px;
    font-size: 16px;
}

.main .main-sub{
    margin-top: 14px;
    height:170px;
    position: relative;
    margin-bottom: 26px;
    /* background-color: yellowgreen; */
  
}
.main .main-sub .main-sub-left
{   position: absolute;
    left:0;
    width:234px;
    padding: 3px 0;
    background-color: #5f5750;
    font-size: 12px;
}
.main .main-sub .main-sub-left ul::after{
    content:'';
    display: table;
    clear: both;
}
.main .main-sub .main-sub-left ul li{
    float: left;
    width:70px;
    height:82px;
    padding: 0 3px;
    text-align: center;
    position: relative;
 
  
    
}
.main .main-sub .main-sub-left ul li:hover {
    color:white 
}
.main .main-sub .main-sub-left ul li i{
    font-size: 24px;
    line-height: 24px;
    margin-block: 4px;
    height:24px;
}
.main .main-sub .main-sub-left ul li a{
    display: block;
    padding-top: 18px;
    color: rgba(255,255,255,0.7);
    
   
}
.main .main-sub .main-sub-left ul li>a:hover {
    color:white 
}
.main .main-sub .main-sub-left ul li:not(:nth-child(3n+3))::after{
    content:'';
    display: block;
    width:1px;
    height:70px;
    right:0;
    top:0;
    position: absolute;
    background-color: rgba(255,255,255,0.1);
}

.main .main-sub .main-sub-left ul li:nth-child(3):before{
    content:'';
    display: block;
    width:65px;
    height:1px;
    left: 5px;
    bottom: 5px;
    position: absolute;
    background-color: rgba(255,255,255,0.1);
}
.main .main-sub .main-sub-left ul li:nth-child(2):before{
    content:'';
    display: block;
    width:65px;
    height:1px;
    left: 5px;
    bottom: 5px;
    position: absolute;
    background-color: rgba(255,255,255,0.1);
}
.main .main-sub .main-sub-left ul li:nth-child(1):before{
    content:'';
    display: block;
    width:65px;
    height:1px;
    right:5px;
    bottom: 5px;
    position: absolute;
    background-color: rgba(255,255,255,0.1);
}
.main .main-sub .main-sub-right
{
    width:978px;
    position: absolute;
    top:0;
    right:0;
}

.main .main-sub .main-sub-right ul li{
    float: left;
    width:316px;
    height:170px;
    display: block;
   
   
}
.main .main-sub .main-sub-right ul li:not(:nth-child(3))
{
    margin-right: 15px;
}
.main .main-sub .main-sub-right ul>li:first-child{
    background: url('https://i1.mifile.cn/a4/xmad_15635211778456_lIxRQ.jpg') ;
    background-size: contain;   
}
.main .main-sub .main-sub-right ul>li:nth-child(2){
    background: url('https://i1.mifile.cn/a4/xmad_15629205000801_vZyDb.jpg') ;
    background-size: contain;   
}
.main .main-sub .main-sub-right ul>li:nth-child(3){
    background: url('https://i1.mifile.cn/a4/xmad_15604776623629_bRHhl.jpg') ;
    background-size: contain;   
}
.main .main-beat{
    margin: 2px 0 42px;
    overflow: hidden;
}
.main .main-beat img{
   width:1226px;
}



.content{
    width:100%; 
    background: #f5f5f5;
    padding-top: 22px;
  
}
.content .content-phone{
  
  
 
}
.content .content-phone .content-phone-top{
    height:58px;
    /* background-color: yellowgreen; */
    position: relative;
   
}
.content .content-phone .content-phone-top h2{
    font-size: 22px;
    line-height: 58px;
    font-weight: 200;
}
.content .content-phone .content-phone-top .content-phone-tright{
    position: absolute;
    right:0;
    top:0;
   
}
.content .content-phone .content-phone-top .content-phone-tright a{
    display: block;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}
.content .content-phone .content-phone-top .content-phone-tright a:hover{
    color:#ff6700;
}
.content .phones{
    position: relative;
}

.content .phones .phones-left{
    
    display: inline-block;
  
    
    
   
    
}
.content  .phones .phones-left a{
    display: inline-block;
     margin: 0;
     padding: 0;
    width:234px;
    height:614px;
 
    transition: all linear .2s;
 
}
.content  .phones .phones-left a:hover{
    transform: translateY(-4px);
    box-shadow: 0 0 15px 0 #ccc;
}
.content  .phones .phones-left a>img{

    width:234px;
}
.content  .phones .phones-right{
    position: absolute;
   top:0;
   right:0;
   /* background-color: yellowgreen; */
} 
.content  .phones .phones-right ul{
    width:992px;
    height:614px;
}
.content  .phones .phones-right ul li{
    background-color: white;
    width:234px;
  height:260px;
  padding: 20px 0;
  margin-left: 14px;
  margin-bottom: 14px;
  float: left;
  text-align: center;
  transition: all linear .2s;
  position: relative;
}
.content  .phones .phones-right ul li:first-child::before{
    content:'新品';
    display: table;
    position: absolute;
    width:64px;
    height:20px;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #83c44e;
    color: #fff;
}
.content  .phones .phones-right ul li:hover{
    transform: translateY(-4px);
    box-shadow: 0 0 15px 0 #ccc;
}
.content  .phones .phones-right .phones-photo{
    width:150px;
 margin: 0 auto 18px;
 
}
.content  .phones .phones-right .phones-photo a{
    display: block;
   
 
   
  
}
.content  .phones .phones-right .phones-photo a img{
    width:150px;
    height:150px;

}
.content  .phones .phones-right .title{
    display: block;
    margin: 0 10px 2px;
    font-size: 14px;
    font-weight: 400;
    text-overflow: ellipsis;
}
.content  .phones .phones-right .desc{
   
    margin-bottom: 10px;
    font-size: 12px;
    color:#b0b0b0;
}
.content  .phones .phones-right .price{
    color:#ff6700;
}
.content  .phones .phones-right .price>del{
   color: #b0b0b0;
}
.content .adver-one{
    margin: 28px 0 22px;
    overflow: hidden;
  
}
.content .adver-one img{
    width:1226px;
}
.content .water{
    padding: 0;
    margin: 0;
     position: relative
}
.content .water p{
  position: absolute;
  top:0;
  left: 25%;
  line-height:100px;

}
.content .water img{
    position: absolute;
    right:0;
 width:80px;

}
.content .water h3{
    position: absolute;
    
    left:10%;
  
    font-size: 24px;
    line-height: 60px;;
}
.content .water i{
    position: absolute;
    top:50%;
    right: 0;
    transform: translateY(-50%);
     
}

/* -------------------------------------------------------- */
.star .star-title p{
    font-size: 16px;
    color:#666;
}
.star .star-title p>span{
    font-size: 12px;
    color:#999;
    margin-left: 10px;
}
.star .star-content{
 
   
}
.star .star-content ul{
   border: 1px solid #999;
  /* background-color: yellow; */
}
.star .star-content ul::after{
    content:"";
    display: table;
    clear: both;
}
.star .star-content ul>li{
    float: left;
    width:303px;
    height:313px;
    text-align: center;
 
   
}
.star .star-content ul>li:not(:nth-child(4))
{
    border-right: 1px solid #999;
}
.star .star-content ul>li>h3{
    font-size: 16px;
    font-weight: 400;
    color:#666;
 
}
.star .star-content ul>li>p{
    font-size: 12px;
   
    color:#999;
    margin-top: -10px;
   
}

.new .new-title{
    margin: 24px 0 8px;
    position: relative;
    color:#666;
}
.new .new-title span:last-child{
    position: absolute;
    bottom:0;
    right:0;

}
.new .new-content{
    position: relative;
}
.new .new-content .new-content-left{
   
  
   width:912px;
    /* background-color: #83c44e; */
    border: 1px solid #999;
    /* box-sizing: border-box; */
}

.new .new-content .new-content-right{
    position: absolute;
    top:0;
    right:0;
    width:312px;
    height:962px;
    border: 1px solid #999;
    border-left: none;
}
.new .new-content .new-content-left ul>li{
    height:320px;
    width:100%;
   
}
.new .new-content .new-content-left ul>li:not(:nth-child(3)){
    border-bottom: 1px solid #999;
}
.new .new-content .new-content-left .new-top>div{
    float: left;
}

.new .new-content .new-content-left .new-one-left
{
    width:608px;
    height:320px;
    border-right: 1px solid #999;
    box-sizing: border-box;
    
}
.new .new-content .new-content-left .new-one-left img{
    width:606px;
}
.new .new-content .new-content-left .new-one-right{
    width:304px;
    height:320px;
    text-align: center;
    
}
.new .new-content .new-content-left .new-one-right p{
    margin-left: 20px;
    text-align: left;
    color:#999;
}

.new .new-content .new-content-left .new-middle>div{
    width:304px;
    height:320px;
   
    float: left;
}
.new .new-content .new-content-left .new-middle div:not(:nth-child(3))
{
    border-right: 1px solid #999;
    box-sizing: border-box;
}

.new .new-content .new-content-left .new-bottom>div{
    width:304px;
    height:320px;
    float: left;
}
.new .new-content .new-content-left .new-bottom div:not(:nth-child(3))
{
    border-right: 1px solid #999;
    box-sizing: border-box;
}
.new .new-content .new-content-left .new-two-left div{
    padding-top: 20px;
    width:304px;
    height:160px;
    position: relative;
    font-size: 14px;
   line-height: 14px;
   color:#666;
}
.new .new-content .new-content-left .new-two-left div:first-child{
  
    border-bottom: 1px solid #999;
    

}
.new .new-content .new-content-left .new-two-left div>img{
    width:130px;
    position: absolute;
    top:10px;
    right:0;
}
.new .new-content .new-content-left .new-two-left div p{
  font-size: 14px;
   line-height: 14px;
   color:#666; 
   
   padding: 0;
   margin: 0;
  
   margin-left: 20px;
} 



.new .new-content .new-content-left .new-top:after{
    content:'';
    display: table;
    clear: both;
}
.new .new-content .new-content-left .new-bottom:after{
    content:'';
    display: table;
    clear: both;
}
.new .new-content .new-content-left .new-middle:after{
    content:'';
    display: table;
    clear: both;
}
.new .new-content .new-content-left .public {
    
    position: relative;
    padding-top: 20px;
    box-sizing: border-box;
    text-align: center;

}
.new .new-content .new-content-left .public p{
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
    color:#666;
    text-align: left;
    margin-left: 20px;
}
.new .new-content .new-content-left .public img{
  width:220px;
}
.new .new-content .new-content-left .new-three-left img{
    width:120px;
}
.new .new-content-right .cheap p{
    padding: 0;
    margin: 0;
}
.new .new-content-right .cheap li{
    height:130px;
    border-bottom: 1px solid #999;
    padding: 10px 20px;
    box-sizing: border-box;
    color:#999;
    position: relative;
}
.new .new-content-right .cheap h3{
    font-weight: 400;
    color:#666;
}
.new .new-content-right .cheap span{
    color:red;
}
.new .new-content-right .cheap img{
    position: absolute;
    right:0;
    top:20px;
}

.new .new-content-right .tips{
    padding: 30px 20px;
}
.new .new-content-right .tips li{
    width:250px;
    height:52px;
    border-bottom: 1px solid #999;
    position: relative;
   
}
.new .new-content-right .tips li a{
    color:#666;
    line-height: 52px;
    font-size: 14px;
}
.new .new-content-right .tips li i{
    position: absolute;
    right:0;

}

.new .new-content-right .huafei{
    padding: 0px 20px;
    color:#999;
    position: relative;
}
.new .new-content-right .huafei input{
    height:35px;
    width:250px;
    margin-bottom: 10px;
}

.new .new-content-right .huafei select{
    position: absolute;
    right:40px;
    top:48%;
    border: none;
    outline: none;
    height:35px;
}

.new .new-content-right .huafei input:last-of-type::placeholder
{
    color:#333;
}
.new .new-content-right .huafei button{
    width:250px;
    height:35px;
    background-color: rgb(216, 216, 243);
    color:white;
    outline: none;
    border: 1px solid #ccc;;
    margin: 0;
    padding: 0;
    box-sizing:content-box;
}
.new .new-content-right .huafei p:nth-last-of-type(1)
{
    padding:0;
    margin: 0;
    font-size: 12px;

}
.foot{
    background: #f5f5f5;
    margin-top: 80px;
}
.foot .icons ul{
    border-bottom: 1px solid #666;
}
.foot .icons ul::after{
    content:'';
    display: table;
    clear: both;
}
.foot .icons ul>li{
    padding-top: 30px;
    box-sizing: border-box;
    width:245px;
    height:155px;
    float: left;
    text-align: center;
    color:#999;
  
}
.foot .icons ul>li i{
    font-size: 36px;
   
}
.foot .icons ul>li p{
    margin: 0;
    padding: 0;
    font-size: 16px;
}
.foot .intro{
   
}
.foot .intro .intro-left ul::after{
  
    content:'';
    display: table;
    clear: both;
}
.foot .intro .intro-left ul{
    padding: 30px 0;
    box-sizing: border-box;
}
.foot .intro .intro-left ul li{
    width:190px;
    height:140px;
    float: left;
  
    box-sizing: border-box;
    border-right: 1px solid #999;
 
}
.foot .intro .intro-left ul li h3{
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
}
.foot .intro .intro-left ul li p{
    font-size: 14px;
    color:#999;
    line-height: 20px;
}
.foot .intro .intro-left ul>li:not(:first-child)
{
    padding-left: 30px;
}
.foot .intro .intro-left ul>li:nth-child(6)

{   width:250px;
     
  border: none;
  text-align: center;
  
}
.foot .intro .intro-left ul>li:nth-child(6) h3{

    color:#999;
    font-size: 24px;
}
.foot .intro .intro-left ul>li:nth-child(6) p{
    padding: 0;
    margin: 0;
}
.foot .intro .intro-left ul>li:nth-child(6) button{
    width:120px;
    height:30px;
    background-color: orangered;
    outline: none;
    border: none;
    margin-top: 10px;
}
.foot .btm-text{
    text-align: center;
    font-size: 12px;
    color:#333;
}
.foot .btn-img{
    text-align: center;
    height:35px;
  padding: 5px 0;
    
}
.foot .btn-img .zhongwen{
    position: absolute;
  
    height:20px;
}
.foot .btn-img select{
    position: absolute;
    left:67%;
    margin-top: 5px;
    border: none;
    outline: none;
}



